﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">
	@* <table width="100%">
		<tr>
			<td>
				<font color="black">
					您正在做的业务是：人力资源--招聘管理--职位发布管理--职位发布变更
				</font>
			</td>
		</tr>
	</table>
	当前可变更是职位发布总数：例 *@
	<div style="height:150px">
	<el-table ref="myref" :data="tableData" style="width: 100%">
		<el-table-column prop="major_name" label="职位名称" width="180"></el-table-column>
		<el-table-column prop="second_kind_name" label="公司名称" width="180"></el-table-column>
		<el-table-column prop="human_amount" label="招聘人数" width="180"></el-table-column>
		<el-table-column prop="registTime" label="发布时间" width="180"></el-table-column>
		<el-table-column prop="deadline" label="截止时间" width="180"></el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button size="small" v-on:click="handleEdit(scope.row)">修改</el-button>
				<el-button size="small"
						   type="danger"
						   v-on:click="handleDelete(scope.row.mre_id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination v-model:current-page="currentPage"
				   v-model:page-size="pageSize"
				   :page-sizes="[2, 4, 6, 8]"
				   :small="small"
				   :disabled="disabled"
				   :background="background"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="rows"
				   v-on:size-change="handleSizeChange"
				   v-on:current-change="handleCurrentChange">
	</el-pagination>
	</div>
	<el-dialog v-model="udialogVisible"
			   title="修改"
			   width="1100">
		<span>
			<table width="100%" border="1" cellpadding=0 cellspacing=1
				   
				   class="TABLE_STYLE1">
				<tr>
					<td class="TD_STYLE1" width="11%">
						I级机构
					</td>
					<td width="14%" class="TD_STYLE2">
						<el-input v-model="uform.yjjg" readonly class="aaa"></el-input>
					</td>
					<td width="11%" class="TD_STYLE1">
						II级机构
					</td>
					<td width="14%" class="TD_STYLE2">
						<el-input v-model="uform.ejjg" readonly class="aaa"></el-input>
					</td>
					<td width="11%" class="TD_STYLE1">
						III级机构
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.sjjg" readonly class="aaa"></el-input>
					</td>
					<td width="11%" class="TD_STYLE1">
						招聘类型
					</td>
					<td class="TD_STYLE2" colspan="2">
						<el-input v-model="uform.zplx" readonly class="aaa"></el-input>
					</td>
				</tr>
				<tr>
					<td class="TD_STYLE1">
						职位分类
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.zwfl" readonly class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						职位名称
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.zwmc" readonly class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						招聘人数
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.zprs" class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						截止日期
					</td>
					<td class="TD_STYLE2">
						<el-date-picker v-model="uform.jzrq"
										type="date"
										placeholder="选择日期">
						</el-date-picker>
					</td>
				</tr>
				<tr>
					<td class="TD_STYLE1">
						变更人
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.bgr" class="aaa"></el-input>
					</td>
					<td class="TD_STYLE1">
						变更时间
					</td>
					<td class="TD_STYLE2">
						<el-input v-model="uform.bgsj" class="aaa"></el-input>
					</td>

					<td>&nbsp; </td>
					<td>&nbsp; </td>
					<td>&nbsp; </td>
					<td>&nbsp; </td>

				</tr>
				<tr>
					<td class="TD_STYLE1">
						职位描述
					</td>
					<td class="TD_STYLE2" colspan="8">
						<textarea v-model="uform.zwms" name="emajorRelease.major_describe" rows="4" cols="80" class="TEXTAREA_STYLE1"></textarea>
					</td>

				</tr>
				<tr>
					<td class="TD_STYLE1">
						招聘要求
					</td>
					<td class="TD_STYLE2" colspan="8">
						<textarea v-model="uform.zpyq" name="emajorRelease.engage_required" rows="4" cols="80" class="TEXTAREA_STYLE1"></textarea>
					</td>

				</tr>
				<el-button v-on:click="qk()">清除</el-button>
				<el-button type="primary" v-on:click="update()">
					修改
				</el-button>
			</table>
		</span>
	</el-dialog>
</div>
<script type="text/javascript">
	var { createApp, reactive, ref, computed, watchEffect } = Vue
	var app = createApp({
		setup() {
			//分页查询
			var currentPage = ref(1);
			var pageSize = ref(2);
			var rows = ref(1);
			const small = ref(false)
			const background = ref(false)
			const disabled = ref(false)
			var tableData = ref([]);
			function sx() {
				console.log(currentPage.value);
				console.log(pageSize.value);
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/GetChances', {
					page: currentPage.value,
					pageSize: pageSize.value
				}).then(function (response) {
					console.log(response.data);
					tableData.value = response.data.chances.result;
					rows.value = response.data.totalRecords.result
						;
				})
			}
			sx();
			function handleSizeChange(size) {
				pageSize.value = size;
				sx();
			}
			function handleCurrentChange(cpage) {
				currentPage.value = cpage;
				sx();
			}
			
			//删除
			function handleDelete(id) {
				console.log(id);
				if (confirm("确认删除吗")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/DeleteEMR', {
						Id:id 
					}).then(res => {
						//console.log(res);
						if (res.data > 0) {
							sx();
							alert("删除成功");
						}
					}).catch(err => {
						console.log(err);
					})
				}

			}
			//修改
			var udialogVisible = ref(false)
			const uform = reactive({
				Id: "",
				yjjg: "",
				ejjg: "",
				sjjg: "",
				zwfl: "",
				zwmc: "",
				zprs: "",
				jzrq: "",
				bgr: "",
				bgsj: "",
				zwms: "",
				zpyq: "",
				zplx: ""
			})
			const uName = computed(() => {
				return sessionStorage.getItem('u');
				
			})
			//获取当前时间
			uform.bgsj = ref(new Date().toLocaleString());

			// 如果你想要实时更新时间，可以使用watchEffect或setInterval
			watchEffect(() => {
				const interval = setInterval(() => {
					uform.bgsj = new Date().toLocaleString();
				}, 1000);
			});
			function handleEdit(row) {
				udialogVisible.value = true;
				uform.Id = row.mre_id;
				uform.yjjg = row.first_kind_name;
				uform.ejjg = row.second_kind_name;
				uform.sjjg = row.third_kind_name;
				uform.zplx = row.engage_type;
				uform.zwfl = row.major_kind_name;
				uform.zwmc = row.major_name;
				uform.zprs = row.human_amount;
				uform.jzrq = row.deadline;
				uform.bgr = uName;
				uform.zwms = row.major_describe;
				uform.zpyq = row.engage_required;
				console.log(row);
			}
			function update() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/UpdateEMR', {
					mre_id: uform.Id,
					human_amount: uform.zprs,
					deadline: uform.jzrq,
					changer: uform.bgr,
					changeTime: uform.bgsj,
					major_describe: uform.zwms,
					engage_required: uform.zpyq
				}).then(res => {
					//console.log(res);
					if (res.data > 0) {
						sx();
						udialogVisible.value = false;
						alert("修改成功");
						qk();
					}
				}).catch(err => {
					console.log(err);
				})
			}
			function qk() {
				uform.zprs = "";
				uform.jzrq = "";
				uform.bgr = "";
				uform.bgsj = "";
				uform.zpyq = "";
				uform.zwms = ""
			}
			return {
				small,
				background,
				disabled,
				currentPage,
				pageSize,
				rows,
				handleSizeChange,
				handleCurrentChange,
				tableData,
				handleDelete,
				udialogVisible,
				handleEdit,
				uform,
				update,
				qk
			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app")
</script>
<style>
	/* CSS Document */
	* {
		FONT-FAMILY: 微软雅黑;
	}

	.resizeDivClass {
		position: relative;
		background-color: #DEDBD6;
		width: 2;
		z-index: 1;
		left: expression(this.parentElement.offsetWidth-1);
		cursor: e-resize;
	}

	A:visited {
		TEXT-DECORATION: none
	}

	A:active {
		TEXT-DECORATION: none
	}

	A:hover {
		TEXT-DECORATION: underline overline
	}

	A:link {
		TEXT-DECORATION: none
	}

	.t {
		LINE-HEIGHT: 1.4
	}

	BODY {
		background-color: #FFFFCC;
		FONT-SIZE: 10pt;
		SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
		SCROLLBAR-SHADOW-COLOR: buttonface;
		SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
		SCROLLBAR-TRACK-COLOR: #eeeeee;
		SCROLLBAR-DARKSHADOW-COLOR: buttonshadow;
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	DIV {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	FORM {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	OPTION {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	P {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	BR {
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	TEXTAREA {
		
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	SELECT {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	.gray {
		CURSOR: pointer;
		FILTER: gray
	}

	.style3 {
		font-size: 16px;
		font-weight: bold;
	}

	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_STYLE2 {
		width: 100%;
	}

	.ALL-STYLE {
		border: 1px ridge #666666;
		border-color: #DEDBD6;
	}

	.TR_STYLE1 {
	}

	.style8 {
		color: #000066
	}



	.TD_HANDBOOK_STYLE1 {
		vertical-align: top;
		width: 100%;
		color: #0000FF;
	}

	.TD_STYLE1 {
		
		border-width: 1;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		
		border-color: #DEDBD6;
		border: 0;
	}

	.TD_STYLE3 {
	}

	.SUBMIT_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.BUTTON_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RESET_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RADIO_STYLE1 {
	}

	.CHECKBOX_STYLE1 {
	}

	.SELECT_STYLE1 {
		width: 100%;
	}

	.SELECT_STYLE2 {
		width: 30%;
	}

	.TEXTAREA_STYLE1 {
		width: 100%;
	}

	.DIV_STYLE1 {
		float: right;
		vertical-align: top;
	}

	.DIV_STYLE2 {
		float: center;
		vertical-align: top;
	}

	.INPUT_STYLE1 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 30%
	}

	.INPUT_STYLE2 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 100%
	}

	.FILE_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseout {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseover {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mousedown {
		BORDER-RIGHT: #FFE400 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #FFE400 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #FFE400 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #FFE400 1px solid
	}

	.btn3_mouseup {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.custom-select .el-input__inner {
		background-color: transparent;
		border: 1px solid #ccc; /* 或者其他你想要的边框颜色 */
	}
</style>
<style>
	body {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: .8em;
	}

	/* the div that holds the date picker calendar */
	.dpDiv {
	}


	/* the table (within the div) that holds the date picker calendar */
	.dpTable {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: center;
		color: #505050;
		background-color: #ece9d8;
		border: 1px solid #AAAAAA;
	}


	/* a table row that holds date numbers (either blank or 1-31) */
	.dpTR {
	}


	/* the top table row that holds the month, year, and forward/backward buttons */
	.dpTitleTR {
	}


	/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTR {
	}


	/* the bottom table row, that has the "This Month" and "Close" buttons */
	.dpTodayButtonTR {
	}


	/* a table cell that holds a date number (either blank or 1-31) */
	.dpTD {
		border: 1px solid #ece9d8;
	}


	/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlightTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
	}


	/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
	.dpTDHover {
		background-color: #aca998;
		border: 1px solid #888888;
		cursor: pointer;
		color: red;
	}


	/* the table cell that holds the name of the month and the year */
	.dpTitleTD {
	}


	/* a table cell that holds one of the forward/backward buttons */
	.dpButtonTD {
	}


	/* the table cell that holds the "This Month" or "Close" button at the bottom */
	.dpTodayButtonTD {
	}


	/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
		color: white;
	}


	/* additional style information for the text that indicates the month and year */
	.dpTitleText {
		font-size: 12px;
		color: gray;
		font-weight: bold;
	}


	/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlight {
		color: 4060ff;
		font-weight: bold;
	}


	/* the forward/backward buttons at the top */
	.dpButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
		padding: 0px;
	}


	/* the "This Month" and "Close" buttons at the bottom */
	.dpTodayButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
	}
</style>

